<section id="toast"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Toast</h2>
    <a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <div class="flex flex-wrap items-center gap-2">
    <div class="flex flex-wrap items-center gap-2">
      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/success" hx-target="#toaster" hx-swap="beforeend">
        Success
      </button>
      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/error" hx-target="#toaster" hx-swap="beforeend">
        Error
      </button>
      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/info" hx-target="#toaster" hx-swap="beforeend">
        Info
      </button>
      <button class="btn-outline" hx-trigger="click" hx-get="/fragments/toast/warning" hx-target="#toaster" hx-swap="beforeend">
        Warning
      </button>
    </div>
  </div>
</section>